<template>
	<view class="container">

		<view v-if="circleName" class="container_text paddingleft">
			<text>所在圈子：</text>
			<h1><text class="minImage">#</text>{{circleName}}</h1>
		</view>

		<van-cell v-if="!circleName" title="所在圈子：" is-link :value="circleselectName" @click="Pickercircle" />

		<view class="container_text paddingleft container_text1">
			<text>填写标题：</text>
			<van-field :model:value="Titlevalue" placeholder="请填写标题（不超过25个字符）" maxlength="25" @input="fieldInput"
				:border="false" />
		</view>
		<view class="paddingleft">
			<view class="container_input">
				<textarea class="container_input_box" v-model="textareaValue" maxlength="2000"
					placeholder-style="color:rgba(61, 61, 61, 0.5)" placeholder="分享此刻的想法..." @input="textareaInput" />
				<text class="container_input_abso">{{textareaList}}/2000</text>
				<!-- <image class="minImage" src="/static/picture.png" mode="widthFix"></image> -->
				<!-- <image class="minImage minImage1" src="/static/invite.png" mode="widthFix"></image> -->
			</view>
		</view>

		<view class="container_image paddingleft">
			<tui-upload :header="header" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
		
			<!-- <view v-if="dynamic.imgArr.length !== 0" class="container_image_box" v-for="(item,i) in dynamic.imgArr"
				:key="i">
				<image :src="item.link" mode="aspectFill"></image>
				<image class="minImage" src="/static/images/mine/no.png" mode="aspectFill"
					@click="CloseImage(dynamic.imgArr,i)"></image>
			</view>
			<view class="container_image_addbox" @click="getImg(dynamic.imgArr)">
				<view class="container_image_add">
					<image src="/static/add.png" mode="widthFix"></image>
				</view>
				<text v-if="dynamic.imgArr.length === 0">封面图片大小推荐456px*326px</text>
			</view> -->
		</view>

		<view class="container_location paddingleft" @click="onLocation">
			<view v-if="!dynamic.site" class="container_location_box">
				<van-icon name="location-o" />
				<text>你在哪里？</text>
			</view>
			<view v-else class="container_location_box">
				<van-icon name="location-o" />
				<text>{{dynamic.site}}</text>
			</view>
		</view>

		<view class="container_pet paddingleft">
			<view v-if="addproductclassList.length !==0 " class="container_pet_box"
				v-for="(item,i) in addproductclassList" :key="i">
				<view class="container_pet_box_img">
					<image :src="item.avatar" mode="aspectFill"></image>
					<h1>{{item.name}}</h1>
				</view>
				<image class="minImage" src="/static/images/mine/no.png" mode="aspectFill" @click="removeminImage(i)">
				</image>
			</view>
			<view v-if="addproductclassList.length == 0" class="container_pet_add" @click="addpetClick">
				添加宠物 +
			</view>
		</view>

		<!-- 按钮 -->
		<view class="container_btn">
			<button type="default" :class="disabledShow?'container_btn_box':''" :disabled="disabledShow"
				@click="addPublished">立即发布</button>
		</view>

		<!-- 添加宠物弹框 -->
		<van-popup :show="addshow" round closeable close-icon-position="top-left" position="bottom"
			custom-style="height: 90%" @close="addshow = false">
			<view class="addshow_box">
				<h1 style="text-align: center;">添加宠物</h1>
				<view class="addshow_box_title" v-for="(item,i) in productclassList" :key="i" @click="addproduct(item)">
					<view class="addshow_box_title_left">
						<image :src="item.previewImage" mode="aspectFill"></image>
					</view>
					<view class="addshow_box_title_right">
						<h1>{{item.productName}}</h1>
						<text>{{item.buyers}}想买 · {{item.buyers}}评分</text>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		CLIENT_SECRET,
		TENANT_ID
	} from '@/config/const'
	import {
		HTTP_REQUEST_URL,
		HEADER,
		TOKEN_HEADER
	} from '@/config/app.js';
	import {
		removeFile,
	} from "@/api/user.js";
	import {
		adddynamic
	} from '@/api/comment.js'
	import {
		productList
	} from '@/api/product.js'

	import {
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				textareaList: 0,
				disabledShow: true,
				dynamic: {
					site: '',
					Titlevalue: '',
					textareaValue: '',
					imgArr: [],
					latitude: 0,
					longitude: 0,
					associatedProductId: ''
				},
				// 圈子ID
				circleId: 0,
				// 圈子宠物名称
				circleName: '',
				circleselectName: '请选择圈子',
				addshow: false,
				// 产品数据
				productclassList: [],
				// 添加产品数据
				addproductclassList: [],
				associatedActivityId: 0,
				serverUrl: HTTP_REQUEST_URL + '/blade-resource/oss/endpoint/put-file',
				header: {}

			};
		},
		computed: {
			...mapGetters('m_user', ['token', 'isLogin'])
		},
		onLoad(option) {
			this.circleId = option.circleId
			this.circleName = option.circleName
			this.associatedActivityId = option.activityListId

			if (option.productId && option.productId != 0) {
				this.dynamic.associatedProductId = option.productId
				this.addproductclassList.push({
					avatar: option.productPreviewImage,
					name: option.productName
				})
			}
			this.header = {
				"Content-Type": "multipart/form-data",
				'Authorization': `Basic ${CLIENT_SECRET}`,
				'Tenant-Id': TENANT_ID,
				'Blade-Auth': 'Bearer ' + this.token
			}

			// 获取圈子下的宠物
			this.productListChange()
		},
		methods: {
			textareaInput(e) {
				// console.log(e)
				if (e.detail.cursor > 0) {
					this.disabledShow = false
				} else {
					this.disabledShow = true
				}
				this.textareaList = e.detail.cursor
				this.dynamic.textareaValue = e.detail.value
			},
			// 定位
			onLocation() {
				const that = this
				uni.chooseLocation({
					success: function(res) {
						// console.log(res)
						that.dynamic.detailedsite = res.address + res.name
						that.dynamic.site = res.name
						that.dynamic.latitude = res.latitude
						that.dynamic.longitude = res.longitude
					}
				});
			},
			fieldInput(e) {
				// console.log(e)
				this.dynamic.Titlevalue = e.detail
			},
			// 获取圈子下的宠物
			productListChange() {
				if (this.circleId != 0) {
					productList(this.circleId).then(res => {
						// console.log(res)
						this.productclassList = res.data
					})
				}
			},

			addPublished() {
				if (this.circleId != 0) {
					if (this.dynamic.Titlevalue.trim() && this.dynamic.imgArr.length > 0) {

						const article = {
							addressDetail: this.dynamic.detailedsite,
							articleType: 1,
							postsContent: this.dynamic.textareaValue,
							title: this.dynamic.Titlevalue,
							latitude: this.dynamic.latitude,
							longitude: this.dynamic.longitude,
							sliderImgs: this.dynamic.imgArr.join(','),
							associatedProductId: this.dynamic.associatedProductId,
							associatedCategoryId: this.circleId,
							associatedActivityId: this.associatedActivityId
						}
						// 调接口
						adddynamic(article).then(res => {
							// console.log(res)
							uni.report('SendoutArticle', '发文章');
							uni.navigateBack()
							this.$util.Tips({
								title: '发布文章成功！'
							});
						}).catch(res => {
							return this.$util.Tips({
								title: res
							});
						})
					} else {
						this.$util.Tips({
							title: '请填写文章标题和图片哦 ~'
						})
					}
				} else {
					this.$util.Tips({
						title: '请先选择圈子！'
					})
				}
			},
			addproduct(item) {
				// console.log(item)
				this.dynamic.associatedProductId = item.id
				this.addproductclassList.push({
					avatar: item.previewImage,
					name: item.productName
				})
				this.addshow = false
			},
			removeminImage(i) {
				this.addproductclassList.splice(i, 1)
			},
			Pickercircle() {
				uni.navigateTo({
					url: '/subpkg/thecircle/thecircle?type=' + '选择圈子'
				})
			},
			addpetClick() {
				if (this.circleId != 0) {
					this.addshow = true
					this.productListChange()
				} else {
					this.$util.Tips({
						title: '请先选择圈子！'
					})
				}
			},

			result: function(e) {
				this.dynamic.imgArr = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				if (e.file && e.file.length > 0) {
					let file = e.file[0]
					let filename = file.substring(file.lastIndexOf("upload"))

					removeFile(filename);
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .van-cell__title,
	.van-cell__value {
		color: rgba(61, 61, 61, 0.5);
		font-size: 30rpx;
	}

	/deep/ .van-cell {
		padding: 40rpx 24rpx !important;
	}

	.container {
		// padding: 0rpx 24rpx;
		padding-bottom: 80px;

		.paddingleft {
			padding-left: 24rpx !important;
			padding-right: 24rpx !important;
		}

		.container_text1 {
			border: none !important;
		}

		.container_text {
			display: flex;
			color: rgba(61, 61, 61, 0.5);
			font-size: 30rpx;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #ededed;
			display: flex;
			align-items: center;

			/deep/ .van-cell {
				padding: 0 !important;
			}

			/deep/ .van-field__body {
				width: 550rpx;
			}

			.minImage {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 34rpx;
				background-color: rgba(253, 211, 56, 1);
				margin: 0 10rpx;
				font-weight: bold;
			}

			h1 {
				color: rgba(61, 61, 61, 1);
				font-size: 30rpx;
			}
		}

		.container_input {
			position: relative;
			// width: 704rpx;
			height: 380rpx;
			background-color: rgba(247, 247, 247, 1);
			border-radius: 10rpx;
			margin-top: 5rpx;
			padding: 29rpx 36rpx;
			box-sizing: border-box;
			font-size: 26rpx;


			.container_input_box {
				width: 100%;
				height: 260rpx !important;
			}

			.container_input_abso {
				position: absolute;
				bottom: 30rpx;
				right: 50rpx;
				color: rgba(61, 61, 61, 0.5);
			}

			.minImage {
				position: absolute;
				bottom: 30rpx;
				left: 50rpx;
				width: 40rpx;
				height: 36rpx;
			}

			.minImage1 {
				left: 150rpx;
			}
		}

		.container_image {
			margin-top: 40rpx;
			display: flex;
			// flex-wrap: wrap;
			align-items: center;

		}

		.container_location {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #ededed;

			.container_location_box {
				max-width: 220rpx;
				height: 52rpx;
				border: 1px solid rgba(61, 61, 61, 0.1);
				border-radius: 26.5rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
				padding: 0 24rpx;
				box-sizing: border-box;

				text {
					margin-left: 6rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.container_pet {
			.container_pet_box {
				width: 704rpx;
				height: 114rpx;
				box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.04);
				border-radius: 15rpx;
				margin: 40rpx 0 30rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 24rpx;
				box-sizing: border-box;
				align-items: center;

				.container_pet_box_img {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 23rpx;
					}
				}

				.minImage {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}

			.container_pet_add {
				color: rgba(61, 61, 61, 1);
				font-size: 34rpx;
				margin: 30rpx 0;
			}
		}


		.container_btn {
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			background-color: #fff;

			button {
				width: 100%;
				// width: 704px;
				height: 96rpx;
				line-height: 96rpx;
				background-color: rgba(253, 211, 56, 1);
				border-radius: 226rpx;
				margin: 30rpx 0;
				font-size: 36rpx;
				font-weight: 500;
			}

			.container_btn_box {
				background-color: rgba(253, 211, 56, 0.5);
			}
		}
	}

	.addshow_box {
		padding: 30rpx 24rpx 0;

		.addshow_box_title {
			height: 164rpx;
			border-bottom: 1rpx solid #ededed;
			display: flex;
			align-items: center;

			.addshow_box_title_left {
				margin-right: 18rpx;

				image {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}

			.addshow_box_title_right {
				h1 {
					color: rgba(61, 61, 61, 1);
					font-size: 30rpx;
				}

				text {
					color: rgba(61, 61, 61, 0.5);
					font-size: 24rpx;
				}
			}
		}
	}
</style>
